<template>
  <f7-page class="center-body4">
    <div class="header-f7">
      <f7-link
        back
        icon-material="chevron_right"
        class="f7-link"
        color="white"
      ></f7-link>
    </div>
    <f7-block class="header">
      <!-- 头像 -->
      <f7-col class="my-name">
        <img src="static/img/center/man-png.png" alt="" class="portrait" />
        <!-- 名字个信息 -->
        <f7-nav-title class="my-name2">
          <f7-block-title class="name">热乾面</f7-block-title>
          <f7-block class="my-id">ID:184779</f7-block>
        </f7-nav-title>
      </f7-col>
      <!-- 收入 余额 订单 -->
      <f7-col class="header-order">
        <ul>
          <li>
            <div class="header-order-title">324</div>
            今日收入
          </li>
          <li>
            <div class="header-order-title">20</div>
            本月订单
          </li>
          <li>
            <div class="header-order-title">864</div>
            我的余额
          </li>
        </ul>
      </f7-col>
      <!-- 访客预约 会议室预约 -->
      <f7-card class="header-appointment">
        <div class="header-appointment-one">
          <div class="header-appointment-img">
            <img src="static/img/center/index4/icon-me-fangke.png" alt="" />
            <div class="header-appointment-title">
              访客预约<br /><span>查看记录</span>
            </div>
          </div>
          <div class="header-appointment-img">
            <img src="static/img/center/index4/icon-me-huiyi.png" alt="" />
            <div class="header-appointment-title">
              会议室预约<br /><span>立即预约</span>
            </div>
          </div>
        </div>
      </f7-card>
      <!-- 设置 -->
      <f7-card class="header-appointment">
        <f7-list>
          <f7-list-item
            :link="item.href"
            :title="item.title"
            class="f7-list"
            v-for="(item, index) in list"
            :key="index"
            :after="item.after"
          >
            <f7-icon slot="media">
              <img :src="item.image" alt=""  />
            </f7-icon>
          </f7-list-item>
        </f7-list>
      </f7-card>
      <div style="width: 100%; height: 60px"></div>
    </f7-block>
    <!-- 底部导航栏 -->

    <f7-viewbar-instince slot="fixed" ></f7-viewbar-instince>
  </f7-page>
</template>

<script>
import f7UserNavbar from "../../../libs/components/f7-user-navbar.vue";
export default {
  components: { f7UserNavbar },
  data() {
    return {
      title: "myself",
      list: [
        {
          title: "收藏资讯",
          image: "static/img/center/index4/icon-me-shoucang.svg",
          href: "/ui/center/index2",
        },
        {
          title: "代办事项",
          image: "static/img/center/index4/icon-me-daiban.svg",
          href: "/ui/center/index2",
        },
        {
          title: "我的消息",
          image: "static/img/center/index4/icon-me-xiaoxi.svg",
          href: "/ui/center/index2",
        },
        {
          title: "物业管理",
          image: "static/img/center/index4/icon-me-wuye.svg",
          href: "/ui/center/index2",
        },
        {
          title: "绑定手机",
          image: "static/img/center/index4/icon-me-shouji.svg",
          href: "/setting/profile",
          after: "立即绑定",
        },
        {
          title: "设置",
          image: "static/img/center/index4/icon-me-shezhi.svg",
          href: "/setting/general",
        },
        {
          title: "修改密码",
          image: "static/img/center/index4/icon-me-mima.svg",
          href: "/setting/editPassword",
        },
        {
          title: "地址管理",
          image: "static/img/center/index4/icon-me-dizhi.svg",
          href: "/ui/center/index2",
        },
      ],
    };
  },
};
</script>

<style lang="less" scoped>
.center-body4 {
  background-color: var(--color-fill-background);
  width: 100%;
  height: 100%;
  position: relative;

  .header-f7 {
    position: absolute;
    top: 2%;
    left: 87%;
    z-index: 3;
  }

  .header {
    margin: 0px;
    background: url('../../../../static/img/center/index4/bg-me3.png') no-repeat;
    background-size: 100% calc(374px * var(--ratio));
    background-attachment: local;
    width: 100%;

    .my-name {
      display: flex;
      margin-bottom: calc(40px * var(--ratio));
      padding-top: calc(40px * var(--ratio));

      .portrait {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        margin-left: calc(14px * var(--ratio));
      }

      .my-name2 {


        .name {
          font-size: calc(44px * var(--ratio));
          color: var(--color-text-base);
          line-height: 30px;
          margin-top: 0px;
          margin-bottom: 0px;
        }

        .my-id {
          font-size: var(--font-size-subcontent-2);
          color: #ffffffb3;
          margin: 0px;
        }
      }
    }

    .header-order {
      ul {
        display: flex;
        justify-content: space-around;
        text-align: center;
        line-height: 23px;
        color: #ffffffb3;
        font-size: var(--font-size-subcontent-2);

        .header-order-title {
          font-size: calc(44px * var(--ratio));
          color: var(--color-fill-grey-inverse);
          font-weight: 500;
        }
      }
    }

    .header-appointment {
      // margin: 0px calc(32px * var(--ratio)) calc(20px * var(--ratio));
      background-color: var(--color-fill-grey-inverse);
      border-radius: 7px;
      box-shadow: 0px 2px 9px 0px #0000000a;
      --f7-card-margin-horizontal: 0px;

      .item-media {
        min-width: 0px;
        margin-right: calc(27px * var(--ratio));
      }

      .header-appointment-one {
        display: flex;
        justify-content: space-around;
        line-height: 15px;

        .header-appointment-img {
          display: flex;
          text-align: left;
          margin: calc(34px * var(--ratio));

          img {
            width: calc(72px * var(--ratio));
            height: calc(72px * var(--ratio));
            border-radius: 50%;
          }

          .header-appointment-title {
            line-height: initial;
            margin-left: calc(24px * var(--ratio));
            font-size: var(--font-size-subcontent);

            span {
              color: var(--color-text-subtext);
              font-size: var(--font-size-subcontent-2);
            }
          }
        }
      }


      .f7-list {
        --f7-list-border-color: var(--color-fill-grey-inverse);
        --f7-list-item-border-color: var(--color-fill-grey-inverse);
        --f7-list-item-media-margin: 0px;
        --f7-list-margin-vertical: 0px;
        --f7-list-item-padding-vertical: 13px;
        --f7-list-item-title-font-size: var(--font-size-maincontent);
        --f7-list-item-after-font-size: 10px;
        --f7-list-item-after-text-color: var(--color-text-subtext);
        --f7-list-chevron-icon-area: 18px;
        line-height: 15px;
        .item-inner:before{
          font-size: 19px;
          color: #CED6E0;
        }
        ul {
          border-radius: 7px;
        }

        img {
          width: calc(48px * var(--ratio));
          height: calc(48px * var(--ratio));
        }
      }
    }
  }

  .footer::after {
    background: var(--color-fill-grey-inverse);
    box-shadow: 4px -1px 12px 3px #0000000a;
  }

}

</style>
